<template>
    <div class="search-bar">
        <el-form :inline="true" >

            <el-form-item label="名称">
                    <el-input v-model="filter.name" placeholder="名称" />
                </el-form-item>
                <el-form-item label="价格"> 
                    <el-input v-model="filter.price" placeholder="价格" />
                </el-form-item>

                <el-form-item>
                        <el-button type="primary" @click="do_search">搜索</el-button>
                    </el-form-item>
        </el-form> 

    </div>
    <el-table
        :data="productList"
        highlight-current-row
        @current-change=""
        style="width: 100%">
        <el-table-column
            property="id"
            label="ID"
            width="80">
        </el-table-column>
        <el-table-column
            property="image"
            label="图片"
            width="">
            <template #default="scope">
                <img style="width:100%" :src="scope.row.image" alt="">
            </template>    
        </el-table-column>
        <el-table-column
            property="name"
            label="名称"
            width="">
        </el-table-column>

        
        <el-table-column
            property="brand_name"
            label="品牌"
            width="">
        </el-table-column>

        <el-table-column
            property="category_name"
            label="分类"
            width="">
           
        </el-table-column>

        <el-table-column
            property="start_at"
            label="商品型号"
            width="">
        </el-table-column>

        <el-table-column
            property="price"
            label="价格"
            width="">
        </el-table-column>

        <el-table-column
            property="sale"
            label="销量"
            width="">
           
        </el-table-column>
        <el-table-column
            property="status"
            label="状态"
            width="">
            <template #default="scope">
                <span v-if="scope.row.status==1">启用</span>
                <span v-if="scope.row.status==0">弃用</span>
            </template>   
        </el-table-column>
        <el-table-column
            align="center"
            label="操作"
            width="200">
            <template #default="scope">

                <a class="el-button el-button--primary el-button--small"
                   :href="'#/main/product/edit/' + scope.row.id">
                    编辑
                </a>
            </template>
        </el-table-column>

    </el-table>

    <div class=" table-below ">
        <a class="el-button el-button--primary"
           href="#/main/product/create">添加</a>
        <el-pagination
            @current-change="changePage"
            :page-size="per_page"
            layout="prev, pager, next" :total="total" />
    </div>

</template>

<script lang="ts" setup>

import {ref} from "vue";
import axios from "axios";
// import {ElMessage} from "element-plus";


const total:any = ref<number>(10)
const per_page:any = ref<number>(15)
const current_page:any = ref<number>(1)

const productList:any = ref<object>();
const filter:any = ref<object>({

    name:'',
    status:'',
    price:'',
    category_name:'',
    brand_name:'',
});

const get_product_list = ()=>{

    var url:any = window.VITE_URL + '/admin.goods/get_list';

    if( filter.value.name ){
        url += '&name=' + filter.value.name;
    }
    if( filter.value.status!= '' ) {
        url += '&status=' + filter.value.status;
    }
    if( filter.value.price ){
        url += '&price=' + filter.value.price;
    }
    if( filter.value.category_name ){
        url += '&category_name=' + filter.value.category_name;
    }

    if( filter.value.brand_name ){
        url += '&brand_name=' + filter.value.brand_name;
    }

    axios.get( url ).then(function( res ){

        productList.value = res.data;
        // t.page.item_total = res.data.length;
        let string:number = res.data.length / per_page.value
        total.value = parseInt( string.toString() );
        total.value += res.data.length % per_page.value ? 1 : 0;

    });

}

get_product_list();

const changePage = ( e:number ):void => {

    current_page.value = e;

}

const do_search = ()=>{

    // console.log(' do search ');
    get_product_list();
}
</script>

<style scoped>

</style>